import React, { useMemo, memo } from 'react';
import { IRouteComponentProps, history } from 'umi';
import useFetchGroupSwr from '@/hooks/swr/useFetchGroupSwr';
import useFetchMonitorInfoSwr from '@/hooks/swr/useFetchMonitorInfoSwr';
import MinerMain from '@/page-compoennt/miner/main';
import MinerCard from '@/page-compoennt/miner/card/MinerCard';
import PageInnerHeader from '@/components/page-inner-header/PageInnerHeader';

const MinerIndexLayout = (
  props: IRouteComponentProps<{
    mid: string;
    gid: string;
    active: 'main' | 'card';
  }>,
) => {
  const { mid: _mid, gid: _gid, active } = props.match.params;
  const mid = parseInt(_mid);
  const gid = parseInt(_gid);

  const { data: groupModel } = useFetchGroupSwr(mid, gid);
  const { data: monitorInfo } = useFetchMonitorInfoSwr(mid);

  const MainElement = useMemo(() => {
    return () => (
      <MinerMain
        mid={mid}
        gid={gid}
        {...props}
        groupModel={groupModel}
        monitorInfo={monitorInfo}
      />
    );
  }, [mid, gid, groupModel, monitorInfo]);

  const onChange = (value: string) => {
    history.push(`/miner/${mid}/${gid}/${value}`);
  };

  return (
    <div>
      <PageInnerHeader
        onChange={onChange}
        options={[
          { text: '矿机', value: 'main' },
          { text: '显卡', value: 'card' },
          { text: '分组配置', value: 'group-config' },
        ]}
        headerActive={active}
        title={groupModel?.currentGroup?.name}
      />
      {active === 'main' && <MainElement />}
      {active === 'card' && <MinerCard />}
    </div>
  );
};

export default memo(MinerIndexLayout);
